<template>
    <div class="HomeList plr30">
        <div class="HomeList_title">
            <img :src="require('@/assets/img/home/HomeDGarden_1.png')" alt="" class="img">
        </div>
        <div class="HomeList_content">
            <div class="HomeList_list pr4 mb10">
                <div class="HomeList_list_img">
                    <img src="https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/112510/17/3279/460714/5ea6fdb2Ed8aced14/157095d3c685f0c2.jpg!q70.dpg.webp" alt="" class="img">
                </div>
                <div class="HomeList_list_txt mtb10">京选尚品】麦瑞克Merach动感单车 智能健身车家用运动健身器材 雅士白/外观专利/飞轮全包/磁控静音</div>
                <div class="HomeList_list_money">
                    <span class="money"><sub>￥</sub>1999</span>
                    <div class="look plr10 ptb10 mr10">看相似</div>
                </div>
                <div class="HomeList_list_vip mtb10">
                    <span class="money mr10"><sup>￥</sup>1948</span>
                    <img :src="require('@/assets/img/home/home_plus.png')" alt="" class="img">
                </div>
            </div>
            <div class="HomeList_list pr4 mb10">
                <div class="HomeList_list_img">
                    <img src="https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/112510/17/3279/460714/5ea6fdb2Ed8aced14/157095d3c685f0c2.jpg!q70.dpg.webp" alt="" class="img">
                </div>
                <div class="HomeList_list_txt mtb10">京选尚品】麦瑞克Merach动感单车 智能健身车家用运动健身器材 雅士白/外观专利/飞轮全包/磁控静音</div>
                <div class="HomeList_list_money">
                    <span class="money"><sub>￥</sub>1999</span>
                    <div class="look plr10 ptb10 mr10">看相似</div>
                </div>
                <div class="HomeList_list_vip mtb10">
                    <span class="money mr10"><sup>￥</sup>1948</span>
                    <img :src="require('@/assets/img/home/home_plus.png')" alt="" class="img">
                </div>
            </div>
            <div class="HomeList_list pr4 mb10">
                <div class="HomeList_list_img">
                    <img src="https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/112510/17/3279/460714/5ea6fdb2Ed8aced14/157095d3c685f0c2.jpg!q70.dpg.webp" alt="" class="img">
                </div>
                <div class="HomeList_list_txt mtb10">京选尚品】麦瑞克Merach动感单车 智能健身车家用运动健身器材 雅士白/外观专利/飞轮全包/磁控静音</div>
                <div class="HomeList_list_money">
                    <span class="money"><sub>￥</sub>1999</span>
                    <div class="look plr10 ptb10 mr10">看相似</div>
                </div>
                <div class="HomeList_list_vip mtb10">
                    <span class="money mr10"><sup>￥</sup>1948</span>
                    <img :src="require('@/assets/img/home/home_plus.png')" alt="" class="img">
                </div>
            </div>
            <div class="HomeList_list pr4 mb10">
                <div class="HomeList_list_img">
                    <img src="https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/112510/17/3279/460714/5ea6fdb2Ed8aced14/157095d3c685f0c2.jpg!q70.dpg.webp" alt="" class="img">
                </div>
                <div class="HomeList_list_txt mtb10">京选尚品】麦瑞克Merach动感单车 智能健身车家用运动健身器材 雅士白/外观专利/飞轮全包/磁控静音</div>
                <div class="HomeList_list_money">
                    <span class="money"><sub>￥</sub>1999</span>
                    <div class="look plr10 ptb10 mr10">看相似</div>
                </div>
                <div class="HomeList_list_vip mtb10">
                    <span class="money mr10"><sup>￥</sup>1948</span>
                    <img :src="require('@/assets/img/home/home_plus.png')" alt="" class="img">
                </div>
            </div>
            <div class="HomeList_list pr4 mb10">
                <div class="HomeList_list_img">
                    <img src="https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/112510/17/3279/460714/5ea6fdb2Ed8aced14/157095d3c685f0c2.jpg!q70.dpg.webp" alt="" class="img">
                </div>
                <div class="HomeList_list_txt mtb10">京选尚品】麦瑞克Merach动感单车 智能健身车家用运动健身器材 雅士白/外观专利/飞轮全包/磁控静音</div>
                <div class="HomeList_list_money">
                    <span class="money"><sub>￥</sub>1999</span>
                    <div class="look plr10 ptb10 mr10">看相似</div>
                </div>
                <div class="HomeList_list_vip mtb10">
                    <span class="money mr10"><sup>￥</sup>1948</span>
                    <img :src="require('@/assets/img/home/home_plus.png')" alt="" class="img">
                </div>
            </div>
            <div class="HomeList_list pr4 mb10">
                <div class="HomeList_list_img">
                    <img src="https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/112510/17/3279/460714/5ea6fdb2Ed8aced14/157095d3c685f0c2.jpg!q70.dpg.webp" alt="" class="img">
                </div>
                <div class="HomeList_list_txt mtb10">京选尚品】麦瑞克Merach动感单车 智能健身车家用运动健身器材 雅士白/外观专利/飞轮全包/磁控静音</div>
                <div class="HomeList_list_money">
                    <span class="money"><sub>￥</sub>1999</span>
                    <div class="look plr10 ptb10 mr10">看相似</div>
                </div>
                <div class="HomeList_list_vip mtb10">
                    <span class="money mr10"><sup>￥</sup>1948</span>
                    <img :src="require('@/assets/img/home/home_plus.png')" alt="" class="img">
                </div>
            </div>
            <div class="HomeList_list pr4 mb10">
                <div class="HomeList_list_img">
                    <img src="https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/112510/17/3279/460714/5ea6fdb2Ed8aced14/157095d3c685f0c2.jpg!q70.dpg.webp" alt="" class="img">
                </div>
                <div class="HomeList_list_txt mtb10">京选尚品】麦瑞克Merach动感单车 智能健身车家用运动健身器材 雅士白/外观专利/飞轮全包/磁控静音</div>
                <div class="HomeList_list_money">
                    <span class="money"><sub>￥</sub>1999</span>
                    <div class="look plr10 ptb10 mr10">看相似</div>
                </div>
                <div class="HomeList_list_vip mtb10">
                    <span class="money mr10"><sup>￥</sup>1948</span>
                    <img :src="require('@/assets/img/home/home_plus.png')" alt="" class="img">
                </div>
            </div>
            <div class="HomeList_list pr4 mb10">
                <div class="HomeList_list_img">
                    <img src="https://img12.360buyimg.com/mobilecms/s372x372_jfs/t1/112510/17/3279/460714/5ea6fdb2Ed8aced14/157095d3c685f0c2.jpg!q70.dpg.webp" alt="" class="img">
                </div>
                <div class="HomeList_list_txt mtb10">京选尚品】麦瑞克Merach动感单车 智能健身车家用运动健身器材 雅士白/外观专利/飞轮全包/磁控静音</div>
                <div class="HomeList_list_money">
                    <span class="money"><sub>￥</sub>1999</span>
                    <div class="look plr10 ptb10 mr10">看相似</div>
                </div>
                <div class="HomeList_list_vip mtb10">
                    <span class="money mr10"><sup>￥</sup>1948</span>
                    <img :src="require('@/assets/img/home/home_plus.png')" alt="" class="img">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'HomeList'
    };
</script>

<style lang="scss" scoped>
    @import '@/assets/css/_mixins.scss';
    .HomeList {
        &_title {
            height: 70px;
            .img {
                width: 100%;
                height: 100%;
            }
        }
        &_content {
            display: flex;
            flex-wrap: wrap;
        }
        &_list {
            width: 50%;
            background: $bgc-fff;
            &:nth-child(2n) {
                padding-right: 0;
                padding-left: 4px;
            }
            &_img {
                position: relative;
                padding-top: 100%;
                .img {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                }
            }
            &_txt {
                @include multiline-ellipsis(2);
                font-size: 26px;
            }
            &_money {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .money {
                    color: $color_e93b3d;
                    display: flex;
                    align-items: baseline;
                    font-size: 32px;
                }
                .look {
                    border: 1px solid $color-ccc;
                    font-size: 24px;
                    color: $color_666;
                }
            }
            &_vip {
                display: flex;
                align-items: center;
                .money {
                    color: $coloe_333;
                    display: flex;
                    align-items: baseline;
                    font-size: 26px;
                }
                .img {
                    width: 56px;
                    height: 18px;
                }
            }
        }
    }
</style>
